<template>
  <div class="morebook">
    <div class="backcate">
      <router-link to="/">
        <img src="../assets/xy.png" alt="" />
      </router-link>
      <h3>{{ $route.query.title }}</h3>
    </div>
    <div class="loading">
      <Loading v-show="!bookList.length"></Loading>
    </div>

    <div class="newAll" v-for="(item, index) in bookList" :key="index">
      <div class="newItem">
        <router-link :to="`/bookDetails/${item._id}`">
          <div class="itemleft">
            <img
              :src="'http://statics.zhuishushenqi.com' + item.cover"
              alt=""
            />
          </div>
          <div class="itemright">
            <div class="itemname">{{ item.title }}</div>
            <div class="synopsis">
              {{ item.shortIntro }}
            </div>
            <div class="bom">
              <div class="bom_left">
                <img src="../assets/zz.png" alt="" />
                <div class="author">{{ item.author }}</div>
                <!-- 言归正传 -->
              </div>
              <div class="bom_right">
                <span class="type" v-show="item.cat">{{ item.cat }}</span>
                <span class="isOk">{{
                  item.isSerial ? "连载中" : "完结"
                }}</span>
                <span class="textNum">{{ item.retentionRatio }}万字</span>
              </div>
            </div>
          </div>
        </router-link>
      </div>
    </div>
  </div>
</template>
<script>
import Loading from "../components/Loading";
export default {
  components: {
    Loading,
  },
  data() {
    return {
      bookList: [],
    };
  },
  created() {
    console.log(this.$route.query.title);
    console.log(this.$route.query.type);
    console.log(this.$route.query.major);
    this.$axios
      .get(
        `/category-info?gender=male&type=${this.$route.query.type}&major=${this.$route.query.major}&minor=&start=0&limit=8`
      )
      .then((datas) => {
        console.log(datas);
        this.bookList = datas.data.books;
      });
  },
};
</script>

<style lang="less" scoped>
.loading {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -22px;
  margin-left: -22px;
}
.backcate {
  display: flex;
  a {
    img {
      margin-top: 20px;
      margin-left: 4vw;
      width: 20px;
      height: 20px;
    }
  }
  h3 {
    flex: 2;
    text-align: center;
  }
}
.newAll {
  margin: 0vw 4vw;
  &:last-child {
    padding-bottom: 10vw;
  }
  .newItem {
    border-bottom: 1px solid rgb(240, 241, 242);
    padding: 4vw 0vw 4vw 0vw;
    a {
      display: flex;

      .itemleft {
        img {
          width: 22vw;
          height: 28vw;
        }
      }
      .itemright {
        margin-left: 1vw;
        .itemname {
          font-weight: bold;
          font-size: 18px;
          color: black;
        }
        .synopsis {
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          color: rgb(164, 155, 163);
          font-size: 14px;
          margin: 3vw 0vw;
        }
        .bom {
          display: flex;
          justify-content: space-between;
          .bom_left {
            img {
              width: 4vw;
              height: 4vw;
              vertical-align: middle;
            }
            .author {
              display: inline-block;
              color: rgb(164, 155, 163);
              font-size: 14px;
            }
          }
          .bom_right {
            .type {
              font-size: 12px;
              color: rgb(145, 150, 158);
              border: 1px solid rgb(226, 228, 230);
              margin-right: 1vw;
            }
            .isOk {
              font-size: 12px;
              color: rgb(237, 66, 75);
              border: 1px solid rgb(250, 203, 206);
              margin-right: 1vw;
            }
            .textNum {
              font-size: 12px;
              color: rgb(66, 132, 237);
              border: 1px solid rgb(203, 222, 250);
            }
          }
        }
      }
    }
  }
}
</style>